<template>
  <a-layout>
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <div class="logo"> <span v-if="collapsed">灵图山</span> <span v-else>灵图山数据管理后台</span> </div>
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">

        <div v-for="item in menuListTree" :key="item.menu_id">
          <div v-if="item.children && item.children.length > 0">
            <a-sub-menu :key="item.menu_id">
              <template #title>
                <span>
                  <user-outlined />
                  <span>{{ item.name }}</span>
                </span>
              </template>
              <a-menu-item @click="menu_item(item2.menu_id, item2.client_path)" :key="item2.menu_id" v-for="item2 in item.children">{{ item2.name }}</a-menu-item>
            </a-sub-menu>
          </div>
          <div v-else>
            <a-menu-item :key="item.menu_id" @click="menu_item(item.menu_id, item.client_path)">
              <component :is="'UserOutlined'" />
              <span>{{ item.name }}</span>
            </a-menu-item>
          </div>
        </div>
        <!-- <a-menu-item :key="item.menu_id" v-for="item in menuListTree" @click="menu_item(item.menu_id, item.client_path)">
          <component :is="'UserOutlined'" />
          <span>{{ item.name }}</span>
        </a-menu-item> -->
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
        <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
        header
      </a-layout-header>
      <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">

import { onMounted, ref, } from 'vue';
import { corsApi } from '../request/http'

import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router';
const store = useCounterStore()
const { meunList, menuListTree } = storeToRefs(store)
const { get_menu_list, get_menu_list_tree } = store

const router = useRouter()


// page init
onMounted(async () => {
  // get_menu_list()

  // if (meunList.value.length == 0) {
  //   await get_menu_list()
  // }
  if (menuListTree.value.length == 0) {
    await get_menu_list_tree()
  }
  console.log(meunList.value);

})

// 菜单折叠展开
const collapsed = ref<boolean>(false)

// 当前菜单展开的key
const selectedKeys = ref<string[]>(['1'])



// 菜单列表 
// const get_menu_list = async () => {
//   const res = await corsApi('menu_lists', 'GET', {},)
//   console.log(res);
//   if (res.data.status === 1) {
//     meunList.value = res.data.result.list
//   }
// }

// 菜单跳转
const menu_item = (id: number, path: string) => {
  console.log(id, path);
  router.push(path)


}


</script>

<style scoped lang="scss">
.ant-layout {
  height: 100vh;

  .logo {
    color: #fff;
    text-align: center;
    font-weight: 700;
    padding: 10px 0;
    box-sizing: border-box;
    font-size: 18px;
  }
}
</style>  